<template>
  <div class="mod-api__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model.trim="state.dataForm.realName" placeholder="真实姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.companyId" placeholder="请选择入职企业" value-key="" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option v-for="item in vcxvfgt" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>

        <el-select class="ml10" v-model="state.dataForm.isJob" placeholder="请选择入在职情况" value-key="" clearable filterable @change="">
          <el-option label="未入职" value=""></el-option>
          <el-option label="在职" :value="true"></el-option>
          <el-option label="离职" :value="false"></el-option>
        </el-select>
        <el-select class="ml10" v-model="state.dataForm.brokerLevel" placeholder="请选择经纪人等级" value-key="" clearable filterable @change="">
          <el-option label="全部" value=""></el-option>
          <el-option label="高级" value="2"></el-option>
          <el-option label="中级" value="1"></el-option>
          <el-option label="初级" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">搜索</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button  type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>

      <el-table-column prop="realName" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column label="性别" width="60" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.gender === 0">男</span>
          <span v-if="scope.row.gender === 1">女</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="gender" width="60" label="性别 " header-align="center" align="center">
        <template #default="scope">
            {{ xingbie(scope.row.gender ) }}
          </template>
      </el-table-column> -->
      <!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="idCard" width="200" label="身份证" header-align="center" align="center"></el-table-column>
      <el-table-column prop="companyId" label="入职企业" width="200" header-align="center" align="center">
        <template #default="scope">
          {{ jkxdfxsd(scope.row.companyId) }}
        </template>
      </el-table-column>
      <el-table-column prop="isJob" label="在职情况" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.isJob">在职</span>
          <span v-if="scope.row.isJob === false">离职</span>
          <span v-if="scope.row.isJob === null">未入职</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyNo" label="员工工号" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="username" label="用户名 微信号" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="mobile" label="手机号" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="balance" label="余额" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="password" label="密码" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column> -->

      <!-- <el-table-column prop="headUrl" label="头像" header-align="center" align="center"></el-table-column> -->

      <!-- <el-table-column prop="email" label="邮箱" header-align="center" align="center"></el-table-column> -->

      <!-- <el-table-column prop="idAddress" label="籍贯地址" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="isAuthentication" label="是否实名" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="isReside" label="是否住宿" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="payCardName" label="发薪卡名  " header-align="center" align="center"></el-table-column>
      <el-table-column prop="payCard" label="发薪卡号" header-align="center" width="170" align="center"></el-table-column>
      <el-table-column label="花名册" header-align="center" width="70" align="center">
        <template v-slot="scope">
          <el-button type="primary" link @click="mxcxrt(scope.row)">查看</el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="payName" label="户名 持卡人" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="qqNo" label="qq号" header-align="center" align="center"></el-table-column>
              <el-table-column prop="urgencyName" label="紧急联系人" header-align="center" align="center"></el-table-column>
              <el-table-column prop="urgencyRelation" label="紧急联系人对应关系 字典 urgency_relation" header-align="center" align="center"></el-table-column>
              <el-table-column prop="urgencyPhone" label="紧急联系人电话" header-align="center" align="center"></el-table-column>
             -->
      <el-table-column prop="createTime" label="注册时间" header-align="center" align="center" width="160"></el-table-column>

      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
        <template v-slot="scope">
          <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
          <el-button type="primary" link @click="zhuchangser(scope.row, true)" v-if="!scope.row.isStaff">设为驻场员</el-button>
          <el-button type="primary" link @click="zhuchangser(scope.row, false)" v-else>取消驻场员</el-button>

          <el-dropdown>
            <span class="el-dropdown-link ls sz">
              {{ fdsfsdrtt(scope.row.brokerLevel) }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="xcxzety(scope.row, 2)">高级经纪人</el-dropdown-item>
                <el-dropdown-item @click="xcxzety(scope.row, 1)">中级经纪人</el-dropdown-item>
                <el-dropdown-item @click="xcxzety(scope.row, 0)">初级经纪人</el-dropdown-item>
                <el-dropdown-item @click="xcxzety(scope.row, '')">取消经纪人</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>

    <el-dialog v-model="isjjdetr" title="花名册">
      <div>
        <el-tabs class="demo-tabs" v-model="activeName">
          <el-tab-pane label="入职记录" name="first">
            <el-table :data="kmxcxerxcr" border style="width: 100%">
              <el-table-column prop="companyName" label="公司名称" header-align="center" align="center"></el-table-column>
              <el-table-column prop="realName" width="100" label="姓名" header-align="center" align="center"></el-table-column>
              <el-table-column prop="createTime" label="入职时间" header-align="center" align="center"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="离职记录" name="second">
            <el-table :data="kmxcxer" border style="width: 100%">
              <el-table-column prop="companyName" label="公司名称" header-align="center" align="center"></el-table-column>
              <el-table-column prop="realName" width="100" label="姓名" header-align="center" align="center"></el-table-column>
              <el-table-column prop="content" label="离职理由" header-align="center" align="center"></el-table-column>
              <el-table-column prop="createTime" label="申请离职时间" header-align="center" align="center">
                <template v-slot="scope">
                  {{ transferTimeYMD(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="leaveTime" label="离职时间" header-align="center" align="center"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./user-add-or-update.vue";
import { xingbie, dxget, zkjsd, transferTimeYMD, dxpost } from "@/utils/utils";
const vcxvfgt = ref([]);
const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/sys/apiUser/page",
  getDataListIsPage: true,
  exportURL: "/sys/apiUser/export",
  deleteURL: "/api/user"
});
const activeName = ref("first");
const kmxcxer = ref([]);
const kmxcxerxcr = ref([]);
const state = reactive({ ...useView(view), ...toRefs(view) });
const isjjdetr = ref(false);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
const injxsd = async () => {
  const resd = await dxget("/sys/tmcompany/option");
  vcxvfgt.value = resd;
};
injxsd();
const jkxdfxsd = (item) => {
  try {
    return vcxvfgt.value.filter((a) => a.id == item)[0].name;
  } catch (e) {
    return "-";
  }
};

const zhuchangser = async (data, isStaff) => {
  await dxpost(
    "/sys/apiUser",
    {
      id: data.id,
      isStaff
    },
    "put"
  );
  data.isStaff = isStaff;
};
const xcxzety = async (data, dj) => {
  await dxpost(
    "/api/user",
    {
      id: data.id,
      brokerLevel: dj,
      isBroker: true
    },
    "put"
  );
  data.brokerLevel = dj;
};
const mxcxrt = async (data) => {
  isjjdetr.value = true;
  activeName.value = "first";
  const retxxe = await dxget("/sys/jobregist/page", {
    isPass: 2,
    userId: data.id
  });
  kmxcxerxcr.value = retxxe.list;

  const ret = await dxget("/sys/userdata/page", {
    type: 4,
    isPass: 2,
    userId: data.id
  });
  kmxcxer.value = ret.list;
};
// mxcxrt();
const fdsfsdrtt = (data) => {
  let kmxcet = "设置经纪人";
  if (data == 0) {
    kmxcet = "初级经纪人";
  }
  if (data == 1) {
    kmxcet = "中级经纪人";
  }
  if (data == 2) {
    kmxcet = "高级经纪人";
  }
  if (data === "") {
    kmxcet = "设置经纪人";
  }
  return kmxcet;
};
</script>
